iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

實驗室助理的技術文章自我整理系列 第 8

Flutter - Flutter 網路 GIF 圖片重複播放

  • 分享至 

  • xImage
  •  

Flutter - Flutter 網路 GIF 圖片重複播放

參考資料

說明

會寫這篇文章是因為當時正在修 行動裝置應用開發 這門課,學習過 Flutter 跟 Dart 語言,剛好教到顯示圖片的部分,然後因為 Flutter 自帶的 Image.network 雖然能顯示 GIF 圖片,但是只會播放一次,無法做到重複播放,所以在參考完這篇 Flutter开发实战系列-控制GIF播放 後,總算是能夠讓網路抓到的 GIF 圖片達成重複播放的效果,特此撰寫本篇文章作為紀錄以方便後續複查,雖然後面沒有機會再用到,但也算是個不錯的經驗。

程式部分

在 Flutter 專案的 lib 資料夾內(即 main.dart 所在的資料夾內),建立 gif_image.dart 檔案,將Flutter_Demo/lib/magic/gif_image.dart 的程式碼貼在 gif_image.dart 檔案裡面。

然後在 main.dart 內引入:

main.dart 完整程式碼

  • repetitionCount 是播放次數通常是設定為大於等於 1 的整數,-1 代表無限次數(無限循環)
  • replayDuration 代表 GIF 每次循環的間隔時間(根據 repetitionCount 設定的數字,決定一次循環會播放幾次)
import 'package:flutter/material.dart';
import 'gif_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GIF Auto Reload Test'),
        ),
        body: HomeBody(),
      ),
    );
  }
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GIFtest(),
    );
  }
}

class GIFtest extends StatefulWidget {
  @override
  _GIFtestState createState() => _GIFtestState();
}

class _GIFtestState extends State<GIFtest> {
  String picRes1 =
      "https://i.pinimg.com/originals/96/02/e4/9602e410f5cda88aaa033d2658e2386a.gif";
  int repetitionCount = -1;
  Duration duration = Duration(seconds: 1);
  GifNetworkImage gifNetworkImage;

  @override
  void initState() {
    super.initState();
    gifNetworkImage = GifNetworkImage(
      picRes1,
      repetitionCount: repetitionCount,
      replayDuration: duration,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        GifImage.gif(image: gifNetworkImage),
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    gifNetworkImage?.dispose();
  }
}

上一篇
JAVA - JAVA Log4j 專門用於 Java 語言的日誌記錄工具
下一篇
K8s - Kubernetes 指令參考筆記
系列文
實驗室助理的技術文章自我整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言